<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="keywords" content="web前端个人简历,web前端,周炯简历,莫墨陌简历,">
    <meta name="description" content="周炯WEB前端工程师的个人简历">
    <meta name="author" content="莫墨陌">
    <title>Web前端工程师简历</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/base.css" type="text/css">
    <link rel="stylesheet" href="css/cv.css">
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "//hm.baidu.com/hm.js?f87e415f9d1f6111b1d34c5f96927d9b";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>

<body>
<div class="content ">
    <div class="cv-container">
        <div id="section1" class="section active">
            <div id="top" title="顶部">
                <img src="image/top.png" alt="回到顶部">
            </div>
            <div class="myIntro">
                <h1 class="fade">Hello, I'm 周炯</h1>
                <h3 class="fade">一个拥有像素眼的前端工程师</h3>
                <span class="active fade" id="abMe">关于我</span>
                <span id="mypro" class="fade">我的作品</span>
            </div>
            <ul class="bg-img">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <div id="section2" class="section">
            <!-- 导航条-->
            <div id="nav-bar" class="bar">
                <div class="container">
                    <a href="#">
                        <div class="fl">周炯简历</div>
                    </a>
                    <ul class="fr nav-ul">
                        <li>关于我</li>
                        <li>求职意向</li>
                        <li>作品集</li>
                        <li>技术掌握</li>
                        <li>我的经历</li>
                        <li>联系我</li>
                    </ul>
                    <div class="fr more-nav">
                        <img src="image/more.png" alt="更多">
                    </div>
                </div>
                <ul class="nav-ul nav-xs-ul">
                    <li>关于我</li>
                    <li>求职意向</li>
                    <li>作品集</li>
                    <li>技术掌握</li>
                    <li>我的经历</li>
                    <li>联系我</li>
                </ul>
            </div>

            <!--关于我-->
            <h2>关于我</h2>
            <hr>
            <div class="center fades">
                <p class="center"><img src="image/mypic.jpg" alt="头像" /></p>
                <div class="my-intro">
                    <p>我叫周炯，21岁，坐标成都，是一名前端工程师。前端是一门有容乃大的行业。</p>
                    <p>对于技术有研究精神、攻关能力和创造执行力，优秀的需求分析能力，热爱学习，极具创新思维;具有良好的沟通、协调能力，善于执行并拥有团队合作精神，服务意识佳，有较强应变和学习能力，专业成绩突出，拥有极强抗压能力;仪表端庄，形象气质佳，品行佳，言谈举止大方得体;熟练使用办公软件，Adobe部分软件，刻苦学习各种技术。</p>
                </div>
            </div>
        </div>
        <div id="section3" class="section">
            <h2>求职意向</h2>
            <hr>
            <div class="container center fades">
                <div class="col-md-3 col-xs-6 skill-ps skill">
                    <p><img src="image/web.png" alt="切图"></p>
                    <p class="ptitle">PS切图</p>
                    <p>从PSD上切出页面需要的图片</p>
                    <p>将小图标合成spirts优化。</p>
                </div>
                <div class="col-md-3 col-xs-6 skill-web skill">
                    <p><img src="image/css.png" alt="css"></p>
                    <p class="ptitle">网页制作</p>
                    <p>响应式页面,简单不冗余代码。</p>
                    <p>css3流畅动画效果，兼容不同浏览器。</p>
                </div>
                <div class="col-md-3 col-xs-6 skill-js skill">
                    <p><img src="image/js.png" alt="js"></p>
                    <p class="ptitle">前端功能</p>
                    <p>用JS完成常见的前端功能特效</p>
                    <p>用AJAX读取后台数据。</p>
                </div>
                <div class="col-md-3 col-xs-6 skill-h5 skill">
                    <p><img src="image/h5.png" alt="h5"></p>
                    <p class="ptitle">h5页面</p>
                    <p>移动端页面的书写</p>
                    <p>兼容平板、安卓、IOS不同终端。</p>
                </div>
            </div>
        </div>
        <!--以下为作品集-->
        <div id="section4" class="section">
            <h2>作品集</h2>
            <hr>
            <div class="container center fades">
                <p class="center intros">开源产品及项目经历。</p>
                <div class="col-md-3 col-xs-6">
                    <div class="imgbox">
                        <img src="image/wx1.png" alt="作品配图">
                    </div>
                    <a href="drip.html" target="_blank">
                        <div class="zp-cover">
                            <h4>微信小程序——包包大冒险</h4>
                            <p>购物车结算jq，订单的选择或删除、金额的计算。</p>
                            <img src="image/search.png" alt="查看">
                        </div>
                    </a>
                </div>
                <div class="col-md-3 col-xs-6">
                    <div class="imgbox">
                        <img src="image/wx2.jpg" alt="作品配图">
                    </div>
                    <a href="#" target="_blank">
                        <div class="zp-cover" style="top: 45%">
                            <h4>微信小程序——一起考状元</h4>
                            <p>AJAX获取后台数据，用数组读取选项与题目。记录测试者的选项返给后台。</p>
                            <img src="image/search.png" alt="查看">
                        </div>
                    </a>
                </div>
                <div class="col-md-3 col-xs-6 ">
                    <div class="imgbox">
                        <img src="image/02.jpg" alt="作品配图">
                    </div>
                    <a href="drip.html" target="_blank">
                        <div class="zp-cover">
                            <h4>vue——在线音乐播放器</h4>
                            <p>直播页面响应式，css3 jq运用较多</p>
                            <img src="image/search.png" alt="查看">
                        </div>
                    </a>
                </div>
                <div class="col-md-3 col-xs-6 ">
                    <div class="imgbox">
                        <img src="image/03.jpg" alt="作品配图">
                    </div>
                    <a href="#" target="_blank">
                        <div class="zp-cover">
                            <h4>vue—移动端—去哪儿</h4>
                            <p>无缝轮播手写，花瓣动画。</p>
                            <img src="image/search.png" alt="查看">
                        </div>
                    </a>
                </div>
                <div class="col-md-3 col-xs-6 ">
                    <div class="imgbox">
                        <img src="image/04.jpg" alt="作品配图">
                    </div>
                    <a href="drip.html" target="_blank">
                        <div class="zp-cover">
                            <h4>web——简历</h4>
                            <p>视频播放，富文本编辑器手写。</p>
                            <img src="image/search.png" alt="查看">
                        </div>
                    </a>
                </div>
                <div class="col-md-3 col-xs-6 ">
                    <div class="imgbox">
                        <img src="image/05.jpg" alt="作品配图">
                    </div>
                    <a href="drip.html" target="_blank">
                        <div class="zp-cover">
                            <h4>官网类首页</h4>
                            <p>多数据响应式网页，能兼容不同大小电脑分辨率</p>
                            <img src="image/search.png" alt="查看">
                        </div>
                    </a>
                </div>

                <div class="col-md-3 col-xs-6 ">
                    <div class="imgbox">
                        <img src="image/07.jpg" alt="作品配图">
                    </div>
                    <a href="drip.html" target="_blank">
                        <div class="zp-cover">
                            <h4>移动端页面</h4>
                            <p>列表页，兼容安卓、ios、平板</p>
                            <img src="image/search.png" alt="查看">
                        </div>
                    </a>
                </div>
                <div class="col-md-3 col-xs-6">
                    <div class="imgbox">
                        <img src="image/08.jpg" alt="作品配图">
                    </div>
                    <a href="drip.html" target="_blank">
                        <div class="zp-cover">
                            <h4>更多......</h4>
                            <img src="image/search.png" alt="查看">
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <div id="section5" class="section">
            <h2>技术掌握</h2>
            <hr>
            <div class="container center fades">
                <div class="col-md-3 col-xs-6">
                    <div class="wrap-box">
                        <div class="circle-wrap clip-auto">
                            <div class="left-clip percent"></div>
                            <div class="right-clip percent"></div>
                        </div>
                        <div class="circle-num">
                            <span>90</span>%
                        </div>
                    </div>
                    <p class="ptitle">HTML+CSS</p>
                </div>
                <div class="col-md-3 col-xs-6">
                    <div class="wrap-box">
                        <div class="circle-wrap clip-auto">
                            <div class="left-clip percent"></div>
                            <div class="right-clip percent"></div>
                        </div>
                        <div class="circle-num">
                            <span>90</span>%
                        </div>
                    </div>
                    <p class="ptitle">Bootstrap+jQuery</p>
                </div>
                <div class="col-md-3 col-xs-6">
                    <div class="wrap-box">
                        <div class="circle-wrap clip-auto">
                            <div class="left-clip percent"></div>
                            <div class="right-clip percent"></div>
                        </div>
                        <div class="circle-num">
                            <span>85</span>%
                        </div>
                    </div>
                    <p class="ptitle">vue+node.js+React+Angular</p>
                </div>
                <div class="col-md-3 col-xs-6">
                    <div class="wrap-box">
                        <div class="circle-wrap clip-auto">
                            <div class="left-clip percent"></div>
                            <div class="right-clip percent"></div>
                        </div>
                        <div class="circle-num">
                            <span>80</span>%
                        </div>
                    </div>
                    <p class="ptitle">其他</p>
                </div>
            </div>
        </div>
        <div id="section6" class="section">
            <h2>我的经历</h2>
            <hr>
            <div class="container center fades">
                <ul class="my-xp">
                    <li>
                        <div class="date-box">
                            <p>6/2017</p>
                            <p>-</p>
                            <p>6/2020</p>
                        </div>
                        <div class="my-work my-xp-box">
                            <strong>四川科技职业学院</strong>
                            <p class="ptitle">软件技术——web前端</p>
                            <p>计算机等级证书</p>
                            <p>英语四级</p>
                            <p>普通话证书</p>
                        </div>
                    </li>
                    <li>
                        <div class="date-box">
                            <p>04/2019</p>
                            <p>-</p>
                            <p>07/2019</p>
                        </div>
                        <div class="my-school my-xp-box">
                            <strong>西南科技大学城市学院</strong>
                            <p class="ptitle">大学本科</p>
                            <p>可迁移能</p>
                            <p>敏捷开发</p>
                            <p></p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div id="section7" class="section">
            <h2>联系我</h2>
            <hr>
            <div class="container center fades">
                <div class="flow">
                    <div class="half">1</div>
                    <div class="half">2</div>
                </div>
            </div>
        </div>
    </div>
    <p class="center beian">© RedSpite | <a href="">蜀ICP备16004270号</a></p>
</div>
<script>
</script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="js/mycv.js"></script>
<script>
    // (function() {
    //     //百度自动链接推送
    //     var bp = document.createElement('script');
    //     var curProtocol = window.location.protocol.split(':')[0];
    //     if (curProtocol === 'https') {
    //         bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    //     } else {
    //         bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    //     }
    //     var s = document.getElementsByTagName("script")[0];
    //     s.parentNode.insertBefore(bp, s);
    // })();
</script>
</body>
</html>